

<template>
  <div>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css"/>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"></script>
<script src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
    <div class="prism-player" id="player-con"></div>
  </div>
</template>
<script>
import vodApi from "/api/vod";
export default {
  asyncData({ params, error }) {
    return vodApi.getPlayAuth(params.vid).then((res) => {
      return {
        vid: params.vid,
        playauth: res.data,
      };
    });
  },

  mounted() {
    var player = new Aliplayer(
      {
        id: "player-con",
        vid: this.vid,
        playauth: this.playauth,
        qualitySort: "asc",
        format: "mp4",
        mediaType: "video",
        width: "100%",
        height: "500px",
        autoplay: false,
        isLive: false,
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: "hover",
        useH5Prism: true,
        components: [
          {
            name: "RateComponent",
            type: AliPlayerComponent.RateComponent,
          },
        ],
      },
      function (player) {
        console.log("The player is created");
      }
    );
  },
};
</script>